import React, {useState} from 'react';
import {
    Button,
    Card,
    Cascader,
    Form,
    Input,
    InputNumber, message,
    Radio, Space,
} from "antd";
import options from "../../../backStage/AdminActivity/options";
import {useLocation, useNavigate} from "react-router-dom";
import {useSelector} from "react-redux";
import {reqAttendActivity} from "../../../../api/frontDesk/frontDeskApi";


const ActivityContent = () => {
    const {TextArea} = Input;

    const [form] = Form.useForm()
    const location = useLocation()
    const nav = useNavigate()
    const {userAllInfo} = useSelector(state => state.persistedReducer.user)

    const activity_id = location.state.id
    const start_time = location.state.time
    const user_id = userAllInfo.id

    const attendActivity = async (info) => {
        console.log(user_id)
        console.log(activity_id)
        console.log(start_time)
        const result = await reqAttendActivity({activity_id, user_id, fd: {...info, create_time: start_time}})
        if (result.status === 1) {
            message.error(result.message)
        } else if (result.status === 0) {
            nav('/my-activity')
            message.success(result.message)
        }
        console.log(info)
    }

    return (
        <div>
            <Card title={<h2>请填写报名信息</h2>} style={{height: 680}}>
                <>
                    <Form
                        form={form}
                        onFinish={attendActivity}
                        labelCol={{span: 7,}}
                        wrapperCol={{span: 12}}
                        layout="horizontal"
                        style={{maxWidth: '100%'}}
                    >
                        <Form.Item rules={[
                            {
                                required: true,
                                message: '请输入姓名!',
                            },
                        ]} name="nickname" label="姓名">
                            <Input/>
                        </Form.Item>
                        <Form.Item name="gender" label="性别" rules={[
                            {
                                required: true,
                                message: '请选择性别!',
                            }
                        ]}>
                            <Radio.Group>
                                <Radio value="男"> 男 </Radio>
                                <Radio value="女"> 女 </Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name="age" rules={[
                            {
                                required: true,
                                message: '请输入年龄!',
                            }
                        ]} label="年龄">
                            <InputNumber/>
                        </Form.Item>
                        <Form.Item name="user_email" label="邮箱" rules={[
                            {
                                required: true,
                                message: '请输入邮箱!',
                            }
                        ]}>
                            <Input/>
                        </Form.Item>
                        <Form.Item name="phone" label="手机号" rules={[
                            {
                                type: 'phone',
                                message: '手机号不符合规范!',
                            },
                            {
                                required: true,
                                message: '请输入手机号!',
                            },
                        ]}>
                            <Input/>
                        </Form.Item>
                        <Form.Item name="place" rules={[
                            {
                                required: true,
                                message: '请选择住址!',
                            }
                        ]}
                                   label="住址">
                            <Cascader options={options}/>
                        </Form.Item>
                        <Form.Item name="reason" rules={[
                            {
                                required: true,
                                message: '请输入报名原因!',
                            }
                        ]} label="报名原因">
                            <TextArea rows={3}/>
                        </Form.Item>
                        <Form.Item style={{display: 'flex', width: '100%', justifyContent: 'center'}}>
                            <Space>
                                <Button onClick={() => nav('/activity')}>取消</Button>
                                <Button onClick={() => form.resetFields()} type="primary">重置</Button>
                                <Button htmlType="submit" type="primary">确认报名</Button>
                            </Space>
                        </Form.Item>
                    </Form>
                </>
            </Card>
        </div>
    );
};

export default ActivityContent;